<div class="container-fluid">
    <ul class="breadcrumb">
        <li><a href="./?/"><i class="icon-home"></i> {HOME}</a></li>
        <li class="active">{REGISTER}</li>
    </ul>
</div>
<div class="bg-primary container-fluid load-indicator" id="registerForm" data-loading="{REGISTERING}">
    <div class="load-indicator" id="mail-sending-loading" data-loading="{SENDING_MAIL}"></div>
    <br>
    <h1 class="text-center">{REGISTER_TITLE}</h1>
    <form class="container">
        <div class="form-group">
            <label for="Account">{ACCOUNT}</label>
            <input type="text" class="form-control" id="Account" placeholder="{ACCOUNT}">
        </div>
        <div class="form-group">
            <label for="Nickname">{NICKNAME}</label>
            <input type="text" class="form-control" id="Nickname" placeholder="{NICKNAME}">
        </div>
        <div class="form-group">
            <label for="Password">{PASSWORD}</label>
            <input type="password" class="form-control" id="Password" placeholder="">
        </div>
        <div class="form-group">
            <label for="ConfirmPassword">{CONFIRM_PASSWORD}</label>
            <input type="password" class="form-control" id="ConfirmPassword" placeholder="">
        </div>
        <div class="form-group">
            <label for="Email">{EMAIL}</label>
            <input type="email" class="form-control" id="Email" placeholder="{EMAIL}">
        </div>
        <div class="form-group">
            <label for="CAPTCHA">{CAPTCHA}</label>
            <div class="form-inline">
                <input type="number" class="form-control" id="CAPTCHA" placeholder="{CAPTCHA}" min="0"
                       max="9999" maxlength="4" style="width: 20%;">
                <button class="btn btn-info" type="button" id="get_captcha">{GET_CAPTCHA}</button>
            </div>
        </div>
        <button type="button" id="register"
                class="btn btn-info btn-lg col-sm-2 col-sm-offset-2">{REGISTER}</button>
        <button id="TencentCaptcha" data-appid="2065088349" data-cbfn="callback" type="button" style="display: none">验证</button>
        <br>
        <br>
        <p class="col-sm-4 col-sm-offset-6 text-right">{HAVE_ACCOUNT}<a href="./?/login"
                                                                                    class="text-yellow">{LOGIN_NOW}</a>
        </p>
    </form>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h4 class="modal-title" id="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p id="modal-body"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="modal-button-cancel"></button>
            </div>
        </div>
    </div>
</div>
<script>
    var online_captcha;
    $(document).ready(function () {
        $("#register").click(function () {
            username = document.getElementById("Account").value;
            nickname = document.getElementById("Nickname").value;
            password = document.getElementById("Password").value;
            confirmPassword = document.getElementById("ConfirmPassword").value;
            email = document.getElementById("Email").value;
            captcha = document.getElementById("CAPTCHA").value;
            if (username === "" || nickname === "" || password === "" || confirmPassword === "" || email === "" || captcha === "") {
                myModal("{TIP}", "{FILL_ALL_INFO}", "{CLOSE}");
            } else {
                // $("#TencentCaptcha").click();
                register_part2();
            }
        });
        $("#get_captcha").click(function () {
            email = document.getElementById("Email").value;
            if (email === "") {
                myModal("{TIP}","{EMAIL_NULL}","{CLOSE}")
            } else {
                $("#registerForm").attr({"data-loading" : "{SENDING_MAIL}"});
                $("#registerForm").addClass("loading");
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        text = xmlhttp.responseText;
                        a = text.split("&");
                        $("#registerForm").removeClass("loading");
                        switch (a[0]){
                            case "successful":
                                online_captcha = a[1];
                                myModal("{TIP}","{EMAIL_SUCCESSFUL}","{CLOSE}");
                                break;
                            case "wait":
                                wait_time = a[1];
                                wait1 = "{EMAIL_WAIT_1}";
                                wait2 = "{EMAIL_WAIT_2}";
                                message = "";
                                if (wait2 === "null"){
                                    message = wait1;
                                }else {
                                    message = wait1 + wait_time + wait2;
                                }
                                myModal("{TIP}",message,"{CLOSE}");
                                break;
                            case "fail":
                                reason = a[1];
                                myModal("{TIP}","{EMAIL_FAIL}" + reason,"{CLOSE}");
                                break;
                        }
                    }
                }
                xmlhttp.open("POST", "./?/getCAPTCHA", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("address=" + email);
            }
        });
    });

    function myModal(title, body, button1) {
        document.getElementById("modal-title").innerText = title;
        document.getElementById("modal-body").innerHTML = body;
        document.getElementById("modal-button-cancel").innerText = button1;
        $("#myModal").modal();
    }

    function register_part2() {
        if (captcha === online_captcha){
            if (password === confirmPassword) {
                $("#registerForm").attr({"data-loading":"{REGISTERING}"});
                $("#registerForm").addClass("loading");
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        text = xmlhttp.responseText;
                        $("#registerForm").removeClass("loading");
                        switch (text) {
                            case "register-successful":
                                myModal("{TIP}", "{REGISTER_SUCCESSFUL}", "{CLOSE}");
                                setTimeout(function (){
                                    self.window.location = "./?/login";
                                },1500);
                                break;
                            case "database-error":
                                myModal("{TIP}", "{DATABASE_ERROR}", "{CLOSE}");
                                break;
                            case "username-exist":
                                myModal("{TIP}", "{USERNAME_EXIST}", "{CLOSE}");
                                break;
                            case "email-exist":
                                myModal("{TIP}", "{EMAIL_EXIST}", "{CLOSE}");
                                break;
                        }
                        // myModal("{TIP}", text, "{CLOSE}");
                    }
                };
                xmlhttp.open("POST", "./?/register", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send("username=" + username + "&nickname=" + nickname + "&password=" + password + "&email=" + email);
            } else {
                myModal("{TIP}", "{PASSWORD_DIFFERENT}", "{CLOSE}");
            }
        }else {
            myModal("{TIP}","{CAPTCHA_WRONG}","{CLOSE}");
        }
    }

    window.callback = function (res){
        // console.log(res);
        if (res.ret === 0){
            // alert(res.ticket);
            register_part2();
        }
    }

</script>
</body>